import React, { Component } from 'react'

function withHoc(WrapComponent) {
  class Mouse extends Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (e) => {
      // console.log(e);
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }

    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }

    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMouseMove)
    }

    render() {
      return <WrapComponent {...this.state} {...this.props} />
    }
  }

  //解决多次创建高级组件名字相同问题
  Mouse.displayName = `withHoc${getDisplayName(WrapComponent)}`

  function getDisplayName(WrapComponent) {
    return WrapComponent.displayName || WrapComponent.name || 'Component'
  }

  return Mouse
}

export default withHoc